<template>
    <div>
      <div class="product-en main-width">
        <span class="theme-color theme-border-color">RESPONSIBILITY</span>
      </div>
      <ul class="page-nav main-width" id="nav-link">
        <li v-for="item in respons"><nuxt-link :to="'/details/responsibility/'+item.id">{{item.title}}</nuxt-link></li>
      </ul>

      <div class="div-link-all main-width" id="nav-img-link">
        <div class="three-part-normal part" v-for="item in respons" :style="{backgroundImage: 'url('+item.imgUrl+')'}" @mouseenter="enterResp(item.id)" @mouseleave="leaveResp(item.id)">
          <nuxt-link :to="'/details/responsibility/'+item.id" >
            <div class="div-link-desc">
              <!--<div class="div-link-desc">健康推广基金</p>-->
              <!--<p class="div-link-en">Rescue Support Incentive</p>-->
            </div>
          </nuxt-link>
        </div>
      </div>
    </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: 'responsibility',
    async asyncData({$axios}){
      const respons = await $axios.$get('http://tfngw.tfnhg.com/Api/adminWeb/get_shzr');
      // console.log(respons)
      for(let i in respons){
        respons[i].imgUrl = respons[i].img
      }
      return {respons}
    },
    methods:{
      enterResp(id){
        let respons = this.respons;
        for(let i in respons){
          if(respons[i].id == id){
            respons[i].imgUrl = respons[i].act_img
          }
        }
        this.respons = respons;
      },
      leaveResp(id){
        let respons = this.respons;
        for(let i in respons){
          if(respons[i].id == id){
            respons[i].imgUrl = respons[i].img
          }
        }
        this.respons = respons;
      }
    }
  }
</script>

<style scoped lang="less">
  .three-part-normal{
    width: 32.6%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #ebe2d0;
  }
  .three-part-normal a{
    display: block;
    width: 100%;
    height:3.24rem;
  }
  .part{
    height:100%;
    position: relative;
  }
  .div-link-all{
    height:3.24rem;
    /*height:3.84rem;*/
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    font-size: 0.15rem;
    margin-top: 0.7rem;
  }
</style>
